<template>
  <div class="details">
    <div class="top-box">
      <!-- 头部 -->
      <div class="cephalosome">
        <van-nav-bar :border="false" @click-left="$router.go(-1)">
          <template #left>
            <van-icon name="arrow-left" />
          </template>
        </van-nav-bar>
      </div>
      <div class="icon">
        <span><van-icon @click="star" name="star-o"/></span>
        <span><van-icon @click="share" name="share-o"/></span>
      </div>
      <!-- 名字 -->
      <van-row type="flex" justify="space-between" class="monophthong">
        <van-col span="12" class="position">
          <div class="name">
            <h2 style="font-size:22px;margin:10px" v-if="list.company">
              {{ list.company.name }}
            </h2>
          </div>
          <div>
            <span class="choic" v-if="list.city">
              <i class="iconfont iconicon_city"></i>
              {{ list.city }}
            </span>
            <span class="choice">
              <span v-if="list.experience">
                <i class="iconfont iconicon_nian"></i>
                {{ list.experience }}
              </span></span
            >
            <span class="choices">
              <span v-if="list.education">
                <i class="iconfont iconicon_xueli"></i>
                {{ list.education }}
              </span>
            </span>
          </div>
        </van-col>
        <van-col class="positiones" span="8">
          <span v-if="list.salary"> {{ list.salary }}</span>
        </van-col>
      </van-row>
      <!-- 福利 -->
      <div style="margin-left:10px">
        <span
          style="margin: 0 5px; font-size: 12px; color: #b4b4bd;"
          v-if="list.feature"
          >{{ list.feature[0] }}</span
        >
        <span
          style="margin:0 5px; font-size: 14px; color: #b4b4bd;"
          v-if="list.feature"
          >{{ list.feature[1] }}</span
        >
        <span style="font-size: 14px; color: #b4b4bd;" v-if="list.feature">{{
          list.feature[2]
        }}</span>
      </div>
      <!-- 内容盒子 -->
      <van-row>
        <div class="main-box van-hairline--bottom"></div>
        <span style="font-size:20px;margin:10px">职位描述</span>
        <div class="box" v-if="list.responsibility">
          <span v-html="list.responsibility"> </span>
        </div>
      </van-row>
      <!-- 底部盒子 -->
      <div class="base">
        <van-row class="bases" @click="showShare">
          <van-col span="4" class="img">
            <van-image
              v-if="list.company"
              round
              width="40px"
              height="40px"
              :src="baseUrl + list.company.logo"
            />
          </van-col>
          <van-col span="16" class="designation">
            <h3>{{ list.name }}</h3>
            <span v-if="list.company">{{ list.company.type }}</span>
            <span v-if="list.company">{{ list.company.step }}</span>
            <span v-if="list.company">{{ list.company.scale }}</span>
          </van-col>
          <van-col span="2">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </div>
      <div class="bottom-box">
        <van-button type="danger" class="exercise" @click="questions"
          >去刷题</van-button
        >
      </div>
      <!-- 分享界面 -->
      <!-- <van-share-sheet v-model="showShare" title="立即分享给好友" /> -->
    </div>
  </div>
</template>
<script>
// 导入接口
import { positionDetail } from '@/api/company/company.js'
import { Toast } from 'vant'
export default {
  created () {
    this.arr()
    // this.arrnew()
  },
  data () {
    return {
      // 获取当前的id
      id: this.$route.query.id,
      list: {},
      // 基地址userInfo
      baseUrl: process.env.VUE_APP_URL
    }
  },
  methods: {
    questions (id) {
      this.$router.push(`/questions/?id=${this.id}`)
    },
    showShare () {
      this.$router.push(`/company/detail/?id=${this.id}`)
    },
    // 定义一个方法 来获取当前的文章详情
    async arr () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 20000
      })
      var res = await positionDetail(this.id)
      console.log(res)
      this.list = res.data
      Toast.success('获取成功')
    },
    arrnew () {
      window.location.reload()
    },
    star () {
      Toast('该功能没有开发')
    },
    share () {
      Toast('该功能没有开发')
    }
  }
}
</script>
<style lang="less" scoped>
.details {
  position: relative;
  .top-box {
    .cephalosome {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      margin-bottom: 122px;
      background-color: white;
      /deep/.van-nav-bar__left {
        padding-left: 0;
      }
      /deep/.van-nav-bar {
        background-color: #ca0131;
      }
      /deep/.van-icon-arrow-left::before {
        color: #fff;
        font-size: 22px;
        margin-left: 5px;
      }
      /deep/.van-nav-bar__title {
        color: #fff;
        font-size: 18px;
      }
      .custom-title {
        margin-left: 200px;
      }
    }
    .icon {
      position: fixed;
      top: 10px;
      right: 15px;
      /deep/.van-icon-star-o::before {
        // margin-left: 290px;
        color: #fff;
      }
      /deep/.van-icon-share-o::before {
        color: #fff;
        margin-left: 10px;
      }
    }
  }
  .name {
    margin-top: 60px;
  }
  .position {
    width: 200px;
    .choic,
    .choice,
    .choices {
      display: inline-block;
      font-size: 14px;
      color: #000;
    }
    /deep/.iconicon_city:before {
      margin-left: 10px;
    }
  }
  .positiones {
    margin-top: 65px;
    span {
      font-size: 16px;
      color: red;
      margin-left: 55px;
    }
  }
  .base {
    margin-bottom: 100px;
    height: 40px;
    .bases {
      margin: 15px 5px;
    }
    .img {
      margin: 5px 0 0 10px;
    }
    .designation {
      h3 {
        font-size: 18px;
        margin-left: 5px;
      }
      span {
        border: 1px solid #ccc;
        font-size: 14px;
        margin: -10px 5px 0 5px;
      }
    }
    /deep/.van-icon-arrow::before {
      font-size: 20px;
      margin-top: 22px;
    }
  }
  .box {
    margin-left: 15px;
    margin-right: 15px;
    span {
      font-size: 16px;
      color: #000;
    }
  }
  .bottom-box {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 55px;
    background-color: #fff;
    z-index: 999;
    .exercise {
      position: absolute;
      left: 20px;
      width: 90%;
      bottom: 5px;
      border-radius: 5px;
    }
  }
}
</style>
